<template>
	<view class="container">
		<!--header-->
		<view class="tui-header-box" :style="{height:height+'px',background:'rgba(232,39,27,'+opcity+')'}">
			<view class="tui-header" :style="{paddingTop:top+'px', opacity:opcity}">
				商品详情
			</view>
			<view class="tui-header-icon" :style="{marginTop:top+'px'}">
				<view class="tui-icon tui-icon-arrowleft tui-icon-back" :style="{color:opcity>=1?'#fff':'#fff',background:'rgba(0, 0, 0,'+iconOpcity+')'}"
				 @tap="back"></view>
			</view>
		</view>
		<!--header-->

		<!--banner-->
		<view class="tui-banner-swiper">
			<swiper :autoplay="true" :interval="5000" :duration="150" :circular="true" :style="{height:scrollH + 'px'}" @change="bannerChange">
				<block v-for="(item,index) in banner" :key="index">
					<swiper-item :data-index="index" @tap.stop="previewImage">
						<image :src="item" class="tui-slide-image" :style="{height:scrollH+'px'}" />
					</swiper-item>
				</block>
			</swiper>
			<tui-tag type="translucent" shape="circleLeft" size="small">{{bannerIndex+1}}/{{banner.length}}</tui-tag>
		</view>
		<!--banner-->

		<view class="product">
			<view class="title-pan">
				<view class="pro-title">
					<view class="left">
						<text class="left">折扣</text>
						￥<text class="center">83.00</text>
						<text class="right">￥149</text>
					</view>
					<view class="right">
						已售1.5万
					</view>
				</view>
				<view class="precent">
					<image src="../../../static/home/commis.png" mode=""></image>
					佣金<text class="red">6%</text>
					预计<text class="red">2.13元</text>
				</view>
				<view class="shop-name">
					陶瓷花瓶北欧创意干花插花花器客厅电视柜家居装饰摆件
					干花插花花器客厅
				</view>
			</view>
			<view class="detial-title">
				商品详情
			</view>
			<view class="detial-image">
				<image :src="'https://www.thorui.cn/img/detail/'+(index+1)+'.jpg'" v-for="(img,index) in 20" :key="index" mode="widthFix"></image>
			</view>
		</view>
		<view class="cai">
			<view class="like">
				<image src="../../../static/home/icon-left.png" mode=""></image>
				<text>相似推荐</text>
				<image src="../../../static/home/icon-right.png" mode=""></image>
			</view>
			<view class="list">
				<view class="item-list">
					<view class="img">
						<image src="../../../static/home/poster.png" mode=""></image>
					</view>
					<view class="right">
						<view class="list-name">
							<text>花器客厅电视柜家居装饰摆件花器客厅电视柜家居装饰摆件</text>
						</view>
						<view class="eye">
							<view class="left">
								佣金6%
							</view>
							<view class="right">
								已售1.5万
							</view>
						</view>
						<view class="dis">
							<text class="left">折扣</text>
							¥<text class="center">83.00</text>
							<text class="right">¥149</text>
						</view>
						<view class="bttn" @tap="productDetail">
							<image src="../../../static/home/icon-proed.png" mode=""></image>
							<text class="center">赚</text>
							<text class="right">¥2.13</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 底部选择层 -->
		<view class="bottom">
			<view class="left">
				自己买
			</view>
			<view class="right" @tap="share">
				立即分享
			</view>
		</view>
	</view>
</template>

<script>
	import tuiTag from "@/components/tag/tag"
	export default {
		components: {
			tuiTag
		},
		data() {
			return {
				height: 64, //header高度
				top: 0, //标题图标距离顶部距离
				scrollH: 0, //滚动总高度
				opcity: 0,
				iconOpcity: 0.5,
				banner: [
					"https://www.thorui.cn/img/product/11.jpg",
					"https://www.thorui.cn/img/product/2.png",
					"https://www.thorui.cn/img/product/33.jpg",
					"https://www.thorui.cn/img/product/4.png",
					"https://www.thorui.cn/img/product/55.jpg",
					"https://www.thorui.cn/img/product/6.png",
					"https://www.thorui.cn/img/product/7.jpg",
					"https://www.thorui.cn/img/product/8.jpg"
				],
				bannerIndex: 0,
			}
		},
		onLoad: function(options) {
			let obj = {};
			setTimeout(() => {
				uni.getSystemInfo({
					success: (res) => {
						this.width = obj.left || res.windowWidth;
						this.height = obj.top ? (obj.top + obj.height + 8) : (res.statusBarHeight + 44);
						this.top = obj.top ? (obj.top + (obj.height - 32) / 2) : (res.statusBarHeight + 6);
						this.scrollH = res.windowWidth
					}
				})
			}, 50)
		},
		methods: {
			share:function(){
				uni.navigateTo({
					url:'/pages/homes/share/share'
				})
			},





			back: function() {
				uni.navigateBack()
			},
			previewImage: function(e) {
				let index = e.currentTarget.dataset.index;
				uni.previewImage({
					current: this.banner[index],
					urls: this.banner
				})
			},
			bannerChange: function(e) {
				this.bannerIndex = e.detail.current
			},
		},
		onPageScroll(e) {
			let scroll = e.scrollTop <= 0 ? 0 : e.scrollTop;
			let opcity = scroll / this.scrollH;
			if (this.opcity >= 1 && opcity >= 1) {
				return;
			}
			this.opcity = opcity;
			this.iconOpcity = 0.5 * (1 - opcity < 0 ? 0 : 1 - opcity)
		}
	}
</script>

<style lang="scss">
	@import "../../../common/Tour/icon.css";
	.container{
		padding-bottom: 100upx;
	}
	.tui-header-box {
		width: 100%;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 9998;
		.tui-header {
			width: 100%;
			font-size: 36upx;
			line-height: 36upx;
			font-weight: 500;
			height: 64upx;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #FFFFFF;
		}

		.tui-header-icon {
			position: fixed;
			top: 0;
			left: 30upx;
			display: flex;
			align-items: flex-start;
			justify-content: space-between;
			height: 32upx;
			transform: translateZ(0);
			z-index: 99999;
			.tui-icon {
				border-radius: 50%;
			}

			.tui-icon-back {
				height: 32px !important;
				width: 32px !important;
				display: block !important;
			}
		}
	}

	.tui-banner-swiper {
		position: relative;

		.tui-tag-class {
			position: absolute;
			color: #FFFFFF;
			bottom: 30upx;
			border-radius: 20upx;
			right: 20upx;
			width: 100upx;
			text-align: center;
		}

		.tui-slide-image {
			width: 100%;
			display: block;
		}
	}

	.product {
		.title-pan {
			background: #FFFFFF;
			padding: 20upx;
			padding-bottom: 30upx;
			.pro-title {
				font-size: 24upx;
				display: flex;
				justify-content: space-between;
				align-items: flex-end;
				color: #999999;
				height: 65upx;
				.left {
					.left {
						font-size: 24upx;
					}
					.center {
						font-size: 40upx;
						font-weight: bold;
						color: rgba(232, 39, 27, 1);
						margin-right: 10upx;
					}
					.right {
						font-size: 24upx;
					}
				}
				.right {
					font-size: 22upx;
					font-weight: 500;
				}
			}

			.precent {
				display: flex;
				align-items: center;
				font-size:24upx;
				font-weight:500;
				height:28upx;
				color:#4D4D4D;
				image {
					width: 32upx;
					height: 32upx;
					margin-right: 10upx;
				}
				.red{
					color:rgba(232,39,27,1);
				}
			}
			.shop-name{
				margin-top: 10upx;
				font-size:28upx;
				font-weight:bold;
				line-height:40upx;
				color:rgba(51,51,51,1);
			}
		}
		.detial-title{
			margin-top:20upx;
			background: #FFFFFF;
			text-align: center;
			height: 100upx;
			line-height: 100upx;
			font-size:30upx;
			font-weight:500;
			color:rgba(51,51,51,1);
		}
		.detial-image {
			transform: translateZ(0);
			border-radius: 24upx;
			overflow: hidden;
			image {
				width: 100%;
				display: block;
			}
		}
		
	}
	.cai{
		.like {
			margin: 40upx 0 20upx;
			text-align: center;
			display: flex;
			align-items: center;
			justify-content: center;
			height: 40upx;
			font-size: 28upx;
			font-weight: 500;
			line-height: 34upx;
			color: rgba(77, 77, 77, 1);
			opacity: 1;
		
			text {
				margin: 0 10upx;
			}
		
			image {
				width: 43upx;
				height: 15upx;
			}
		}
		.list{
			background:#F2F2F2;
			padding: 30upx 28upx;
			.item-list{
				padding: 20upx;
				background: #FFFFFF;
				border-radius:20upx;
				height:338upx;
				display: flex;
				margin-bottom: 20upx;
				.img{
					image{
						width: 280upx;
						height: 280upx;
						border-radius:10upx;
						margin-right:20upx;
					}
				}
				.right{
					.list-name{
						margin-top: 10upx;
						font-size:24upx;
						font-weight:500;
						line-height:29upx;
						color:rgba(51,51,51,1);
						image{
							width: 60upx;
							height: 28upx; 
							margin-right:5upx ;
						}
					}
					.eye{
						display: flex;
						justify-content: space-between;
						margin-top: 10upx;
						.left{
							text-align: center;
							width:108upx;
							height:40upx;
							font-size:22upx;
							font-weight:500;
							line-height:40upx;
							color:rgba(230,18,5,1);
							background:rgba(232,39,27,0.2);
							border-radius:10upx;
						}
						.right{
							font-size:22upx;
							font-weight:500;
							line-height:28px;
							color:rgba(153,153,153,1);
						}
					}
					.dis{
						font-size: 22upx;
						color:rgba(232,39,27,1);
						margin-top: 15upx;
						.left{
							color:rgba(153,153,153,1);
							margin-right: 10upx;
						}
						.center{
							font-size:28upx;
							font-weight:bold;
							margin-right: 10upx;
						}
						.right{
							color:rgba(204,204,204,1);
							font-size:20upx;
							text-decoration: line-through;
						}
					}
					.bttn{
						width:228upx;
						height:60upx;
						background:rgba(232,39,27,1);
						border-radius:30upx;
						font-size:22upx;
						color:rgba(255,255,255,1);
						display: flex;
						align-items: center;
						justify-content: center;
						margin: 30upx  0 0 125upx;
						image{
							width: 36upx;
							height: 36upx;
							display:inline-block;
						}
						.center{
							margin: 5upx 10upx 0;
						}
						.right{
							font-weight:bold;
							font-size:32upx;
						}
					}
				}
			}
			
		}
	}
	.bottom{
		width: 100%;
		height: 100upx;
		/* box-sizing: border-box; */
		position: fixed;
		display: flex;
		align-items: center;
		justify-content: space-between;
		z-index: 10;
		bottom: 0;
		left: 0;
		padding-bottom: env(safe-area-inset-bottom);
		.left{
			width: 50%;
			background:rgba(66,65,65,1);
			opacity:1;
			height: 100upx;
			text-align: center;
			font-size:36upx;
			font-weight:500;
			line-height:100upx;
			color:rgba(245,245,245,1);
		}
		.right{
			width: 50%;
			background:rgba(232,39,27,1);
			opacity:1;
			height: 100upx;
			text-align: center;
			font-size:36upx;
			font-weight:500;
			line-height:100upx;
			color:rgba(245,245,245,1);
		}
	}
</style>
